<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Custom Select</title>
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
    <style>
        .beauty_select {
            display: block;
            width: 380px;
            height: 40px;
            border: 1px solid #cccccc;
            box-shadow: 0 2px 2px #ddd;
            border-radius: 5px;
            position: relative;
        }

        .beauty_select.drop_open {
            border-radius: 5px 5px 0 0;
            border-color: #ff7800;
            border-bottom-color: #f3e1d2;
        }

        .beauty_select > .select_container {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .beauty_select > .select_container > div {
            display: block;
            height: 100%;
            vertical-align: middle;
            float: left;
        }

        .beauty_select > .select_container > div.select_flag {
            width: 20px;
            background: url(../public/icon-star.png) center 10px no-repeat;
        }

        .beauty_select > .select_container > div.select_label {
            width: 100px;
        }

        .beauty_select > .select_container > div.select_label label {
            line-height: 40px;
        }

        .beauty_select > .select_container > div.select_text {
            width: 220px;
        }

        .beauty_select > .select_container > div.select_text input[type='text'] {
            border: none;
            width: 100%;
            height: 100%;
            padding: 0;
        }

        .beauty_select > .select_container > div.select_text input[type='text']:focus,
        .beauty_select > .select_container > div.select_text input[type='text']:active {
            outline: none;
        }

        .beauty_select > .select_container > div.select_action {
            width: 40px;
            background: url(../public/arrow_down.png) center center no-repeat;
            cursor: pointer;
        }

        .beauty_select.drop_open > .select_container > div.select_action {
            background-image: url(../public/arrow_up.png);
        }

        .beauty_select > .select_drop_down {
            display: none;
            position: absolute;
            left: -1px;
            top: 41px;
            width: 100%;
            height: 150px;
            border: 1px solid #ff7800;
            border-top-color: transparent;
            border-radius: 0 0 5px 5px;
            background-color: #fff;
            z-index: 100;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .beauty_select.drop_open > .select_drop_down {
            display: block;
        }

        .beauty_select > .select_drop_down > ul {
            list-style: none;
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .beauty_select > .select_drop_down li {
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            cursor: pointer;
        }

        .beauty_select > .select_drop_down li:last-of-type {
            border-radius: 0 0 5px 5px;
        }

        .beauty_select > .select_drop_down li.on,
        .beauty_select > .select_drop_down li:hover {
            background-color: #2896fa;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        (function ($) {
            $.fn.beautySelect = function (options) {
                var defaults={
                    label:""
                };
                var settings= $.extend({},defaults,options);
                var $select = $("<div class='beauty_select'></div>");
                $select.attr("id", $(this).attr("id")).append("<div class='select_container'>" +
                        "<div class='select_flag'></div>" +
                        "<div class='select_label'><label>"+settings.label+"</label></div>"+
                        "<div class='select_text'><input type='text' readonly='readonly'/>" +
                        "<input type='hidden' name='"+$(this).attr("name")+"'/>"+
                        "</div>" +
                        "<div class='select_action'></div>" +
                        "</div>");
                var $dropdown=$("<div class='select_drop_down'><ul></ul></div>");
                var count=0;
                $(this).find("option").each(function(){
                    $dropdown.find("ul").append("<li data-value='"+$(this).attr("value")+"'>"+$(this).text()+"</li>");
                    count++;
                });
                if(count<5){
                    $dropdown.css("height",count*30+"px");
                }
                $select.append($dropdown);
                $select.mouseleave(function(){
                    $(this).removeClass("drop_open");
                });
                $select.on("click",".select_action",function(){
                    $(this).closest(".beauty_select").toggleClass("drop_open");
                });
                $select.on("click",".select_drop_down li",function(){
                    var $self = $(this);
                    var $container = $self.siblings().removeClass("on").end().addClass("on").closest(".beauty_select").removeClass("drop_open");
                    $container.find("input[type='text']").val($self.text()).next("[name='Select']").val($(this).attr("data-value"));
                });
                $(this).replaceWith($select);
            };
        })(jQuery);

        $(function () {
            $(".beauty_select").mouseleave(function () {
                $(this).removeClass("drop_open");
            });
            $(".beauty_select .select_action").click(function () {
                $(this).closest(".beauty_select").toggleClass("drop_open");
            });
            $(".beauty_select .select_drop_down li").click(function () {
                var $self = $(this);
                var $container = $self.siblings().removeClass("on").end().addClass("on").closest(".beauty_select").removeClass("drop_open");
                $container.find("input[type='text']").val($self.text()).next("[name='Select']").val($(this).attr("data-value"));
            });
            $("#CustomerSelect").beautySelect({label:"Category"});
        });
    </script>
</head>
<body>
<div class="beauty_select">
    <div class="select_container">
        <div class="select_flag">
        </div>
        <div class="select_label">
            <label>Category</label>
        </div>
        <div class="select_text">
            <input type="text" readonly="readonly"/>
            <input type="hidden" name="Select"/>
        </div>
        <div class="select_action">
        </div>
    </div>
    <div class="select_drop_down">
        <ul>
            <li data-value="Option1">Option1</li>
            <li data-value="Option2">Option2</li>
            <li data-value="Option3">Option3</li>
            <li data-value="Option4">Option4</li>
            <li data-value="Option5">Option5</li>
        </ul>
    </div>
</div>

<select id="CustomerSelect" name="Option" style="margin-top: 200px">
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="4">Option4</option>
    <option value="5">Option5</option>
</select>
</body>
</html>